<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">



<style>
    .brand-img{

        padding: 5px 5px 5px 5px;
    }
</style>
</head>
<body>
<pre>
        <h4>导航条和导航在字面上很相近，但是在bootStrap中导航和导航条还是有很大的区别，
        导航条中有一个背景色，导航条中可以有表单元素，也可以有链接，还可以包含导航等。
        导航条是一个响应式组件，在移动设备上可以折叠,在大屏幕设备上会变回水平模式

        基本用法
        在导航class="nav"(标签ul)的基础上添加class="navbar-nav"
        在导航的外表套用一个容器(div),并且使用class="navbar navbar-default"</h4>

    </pre>


<div class="container">
    <h4>基本示例</h4>
    <div class="navbar navbar-default" role="navigation">
        <ul class="nav navbar-nav">
            <li class="active"><a href="javaScript:">首页</a></li>
            <li><a href="javaScript:">音乐</a></li>
            <li><a href="javaScript:">视频</a></li>
            <li><a href="javaScript:">图片</a></li>
            <li><a href="javaScript:">地图</a></li>
        </ul>
    </div>

    <h4>品牌图标</h4>
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a href="javaScript:" class="navbar-brand">
                品牌
            </a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="javaScript:">首页</a></li>
            <li><a href="javaScript:">音乐</a></li>
            <li><a href="javaScript:">视频</a></li>
            <li><a href="javaScript:">图片</a></li>
            <li><a href="javaScript:">地图</a></li>
        </ul>
    </div>
    <h4>品牌图标(图片)</h4>
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a href="javaScript:" class="navbar-brand brand-img">


                <img src="../image/1.png" style="width:40px ;height: 40px;"/></a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="javaScript:">首页</a></li>
            <li><a href="javaScript:">音乐</a></li>
            <li><a href="javaScript:">视频</a></li>
            <li><a href="javaScript:">图片</a></li>
            <li><a href="javaScript:">地图</a></li>
        </ul>
    </div>

    <h4>导航条--表单</h4>
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a href="javaScript:" class="navbar-brand">
                品牌
            </a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="javaScript:">首页</a></li>
            <li><a href="javaScript:">音乐</a></li>
            <li><a href="javaScript:">视频</a></li>
            <li><a href="javaScript:">图片</a></li>
            <li><a href="javaScript:">地图</a></li>
        </ul>
        <form class="navbar-form navbar-right">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="搜索">
            </div>
            <button class="btn btn-default">
                搜索
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </form>
    </div>
    
    <h4>导航条---按钮(尽量不要使用a标签代替按钮)</h4>
    <div class="navbar navbar-default">
        <div class="navbar-header">


                <a href="javaScript:" class="navbar-brand">品牌</a>

        </div>
        <ul class="nav navbar-nav">
            <li><a href="javaScript:">首页</a></li>
            <li><a href="javaScript:">音乐</a></li>
            <li><a href="javaScript:">视频</a></li>
            <li><a href="javaScript:">图片</a></li>
            <li><a href="javaScript:">地图</a></li>
        </ul>
        <button class="btn btn-default navbar-btn" type="button">
            搜索
            <span class="glyphicon glyphicon-search"></span>
        </button>
    </div>

    <h4>导航条---文本和链接(一般使用p标签)</h4>
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a href="javaScript:" class="navbar-brand">品牌</a>
        </div>
        <p class="navbar-text">导航条中使用文本&nbsp;&nbsp;这是<a href="javaScript:" class="navbar-link">连接</a></p>
    </div>
    <h4>导航条中的二级菜单(固定在底部)</h4>
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a href="javaScript:" class="navbar-brand">品牌</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="javaScript:">首页</a></li>
            <li class="dropdown">
                <a href="javaScript:" class="dropdown-toggle" data-toggle="dropdown">
                    音乐
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">标题</li>
                    <li><a href="javaScript:">流行音乐</a></li>
                    <li><a href="javaScript:">古典音乐</a></li>
                    <li class="divider"></li>
                    <li><a href="javaScript:">轻音乐</a></li>
                    <li><a href="javaScript:">流行音乐</a></li>
                </ul>
            </li>
            <li><a href="javaScript:">视频</a></li>
            <li><a href="javaScript:">图片</a></li>
            <li><a href="javaScript:">地图</a></li>
        </ul>
    </div>

    <h4>响应式导航条</h4>
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-myCollpase">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="javaScript:" class="navbar-brand">导航条</a>
        </div>
        <div class="collapse navbar-collapse navbar-myCollpase">
            <ul class="nav navbar-nav">
                <li><a href="javaScript:">首页</a></li>
                <li><a href="javaScript:">音乐</a></li>
                <li><a href="javaScript:">视频</a></li>
                <li><a href="javaScript:">图片</a></li>
                <li><a href="javaScript:">地图</a></li>
            </ul>
        </div>
    </div>

    <h4>反色导航条</h4>
    <div class="navbar navbar-inverse">
        <div class="navbar-header">
            <a href="javaScript:" class="navbar-brand">
                品牌
            </a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="javaScript:">首页</a></li>
            <li><a href="javaScript:">音乐</a></li>
            <li><a href="javaScript:">视频</a></li>
            <li><a href="javaScript:">图片</a></li>
            <li><a href="javaScript:">地图</a></li>
        </ul>
    </div>
</div>

</body>
</html>